<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    centered
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="标题"
      >
        <a-input 
          placeholder="请输入标题" 
          :rows="5" 
          :maxLength="4"
          v-decorator="['title',{rules: [{ required: true, message: '请输入标题' }]}]"/>
        <a-input hidden v-decorator="['id']"></a-input>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="简介"
      >
        <a-textarea placeholder="请输入简介" :rows="5" v-decorator="['intro',{rules: [{ required: true, message: '请输入简介' }]}]"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { extVisionCreateOrEdit } from '@/api/system/system'
import pick from 'lodash.pick'
export default {
  components: {
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      confirmLoading: false,
      title: '',
      type: '',
      form: this.$form.createForm(this)
    }
  },
  beforeCreate () {
  },
  created () {
  },
  methods: {
    add (obj) {
      this.title = obj.title
      this.type = obj.type
      this.visible = true
      this.form.resetFields()
    },
    edit (obj) {
      this.title = obj.title
      this.type = obj.type
      this.visible = true
      this.form.resetFields()
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(obj.data, 'id', 'title', 'intro'))
      })
    },

    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = JSON.parse(JSON.stringify(values))
          this.confirmLoading = true
          return extVisionCreateOrEdit(params).then(res => {
            if (this.type === 'add') {
              this.$message.success('新增成功')
            } else {
              this.$message.success('编辑成功')
            }
            this.visible = false
            this.$emit('ok')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>
<style scoped>
  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }
  .avatar-uploader > .ant-upload img{
    width: 86px;
    height: 86px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
